<template>
  <div class="course-selection-container">
    <el-form ref="form" :model="form" label-width="80px">
      <div class="course-selection">
        <h2>课程分类</h2>
        <el-form-item>
          <el-radio-group v-model="form.categories">
            <el-radio :label="v.name" v-for="v in categories" :key="v.id">{{ v.name }}</el-radio>>
          </el-radio-group>
        </el-form-item>
      </div>
    <div class="course-selection">
      <h2>课程名称</h2>
<!--      <div class="select-box">
        <select v-model="selectedCourse">
          <option value="">请选择课程...</option>
          <option v-for="course in productOptions" :value="course.id" :key="course.id">
            {{ course.spmc }}
          </option>
        </select>
      </div>-->
      <el-form-item prop="spmc">
        <el-select
          class="select-box"
          v-model="form.spmc"
          placeholder="请选择商品名称"
          clearable
          @change="handleProductChange"
        >
          <el-option
            v-for="item in productOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <input type="hidden" v-model="form.spid" />
<!--
      <div class="course-ids">
        <div class="id-field">
          <label>分类ID</label>
          <select v-model="categoryId">
            <option value="">请选择课程</option>
            <option v-for="cat in categories" :value="cat.id" :key="cat.id">
              {{ cat.name }}
            </option>
          </select>
        </div>
        <div class="id-field">
          <label>项目ID</label>
          <select v-model="projectId">
            <option value="">请选择课程</option>
            <option v-for="proj in projects" :value="proj.id" :key="proj.id">
              {{ proj.name }}
            </option>
          </select>
        </div>
      </div>
-->

      <div class="course-description">
        <h2>课程说明</h2>
        <div class="description-content">
          <el-form-item prop="field102">
            <el-input v-model="ms" type="textarea" disabled placeholder="请输入多行文本"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </div>
      </div>

      <div class="order-info">
        <h2>填写下单信息</h2>
        <div class="order-instructions">
          <p>下单格式：学校(可为空)账号密码</p>
          <p>例如：中南大学1888888888 a123456</p>
          <p>注：各项信息中可用空格分隔，多账号下单必须换行</p>
        </div>
        <div class="order-header">下单信息</div>
        <el-form-item prop="field103">
          <el-input v-model="xdxx" type="textarea" placeholder="请输入下单信息..."
                    :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
      </div>
      <div style="text-align: right">
        <el-button type="primary" style="background-color: #97a8be" size="medium"  @click="reset" > 重置 </el-button>
        <el-button type="primary" style="background-color: #13CE83FF" size="medium" @click="selCourse" > 查询课程 </el-button>
        <el-button type="primary" size="medium" @click="saveOrder" > 下单 </el-button>
      </div>

      <div v-if="showDiv">这是要显示/隐藏的内容
      {{lessonList}}
      </div>
    </div>
    </el-form>
  </div>
</template>

<script>
import {listProduct} from "@/api/operation/product";

export default {
  data() {
    return {
      showDiv: false, // 默认隐藏
      selectedCourse: '',
      categoryId: '',
      projectId: '',
      orderText: '',
      categories: [
        { id: '0', name: '全部' },
        { id: '1', name: '自营' },
        { id: '2', name: 'XX' }
      ],
      projects: [
        { id: 'p1', name: '项目1' },
        { id: 'p2', name: '项目2' },
        { id: 'p3', name: '项目3' }
      ],
      courses: [],
      // 表单参数
      form: {
        categories:'全部',
        spid: null,
        spmc: null,
        xdxx: null,
        kcxx: null
      },
      lessonList:[]
    }
  },
  //执行顺序created->computed->mounted
  created() {
    this.getProductList();
  },
  computed: {
    productOptions() {
      return this.courses;
    },
    schoolOptions() {
      return this.schoolList;
    }
  },
  methods: {
    saveOrder,
    /** 查询商品信息列表 */
    getProductList() {
      this.loading = true;
      listProduct(null).then(response => {
        console.log(response.rows)
        this.courses = response.rows.map(item => ({
          value: item.id,  // 使用productId作为value
          label: `${item.spmc} (¥${item.spdj})`  // 组合显示名称和价格
        }));
      });
    },
    /**
     * 选择商品
     * @param value
     */
    handleProductChange(value) {
      const selected = this.productOptions.find(item => item.value === value);
      this.form.spid = selected?.value;
      this.form.spmc = selected?.label;
    },
    // 表单重置
    reset() {
      this.form = {
        categories: '全部',
        spmc: null,
        spid: null,
        xdxx: null
      };
      this.resetForm("form");
    },
    selCourse() {
      selCourse(null).then(response => {
        console.log(response.rows)
        this.showDiv = !this.showDiv;
        this.courses = response.rows.map(item => ({
          value: item.id,  // 使用productId作为value
          label: `${item.spmc} (¥${item.spdj})`  // 组合显示名称和价格
        }));
      });
    },
    saveCourse() {
      selCourse(null).then(response => {
        console.log(response.rows)
        this.showDiv = !this.showDiv;
        this.courses = response.rows.map(item => ({
          value: item.id,  // 使用productId作为value
          label: `${item.spmc} (¥${item.spdj})`  // 组合显示名称和价格
        }));
      });
    }
  }
}
</script>

<style scoped>
.course-selection-container {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: #333;
}

.course-categories h2,
.course-selection h2 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.tab {
  padding: 8px 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.tab.active {
  background-color: #1890ff;
  color: white;
}

.select-box select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  margin-bottom: 20px;
}

.course-ids {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.id-field {
  flex: 1;
}

.id-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
}

.id-field select {
  width: 100%;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}

.course-description {
  margin-bottom: 20px;
}

.description-content {
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  min-height: 60px;
}

.order-info {
  margin-top: 30px;
}

.order-header {
  font-weight: bold;
  margin-bottom: 10px;
}

.order-instructions {
  background-color: #f5f5f5;
  padding: 10px 15px;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 14px;
  color: #666;
}

.order-instructions p {
  margin: 5px 0;
}

.order-textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  resize: vertical;
  font-family: inherit;
}
</style>
